<template>
    <div>
        <v-layout row wrap>
            <v-flex xs6>
                <v-btn color="primary" round>品牌添加</v-btn>
            </v-flex>

            <v-flex xs6>
                <v-text-field
                        label="搜索"
                        prepend-icon="search"
                        v-model="searchKey"
                ></v-text-field>
            </v-flex>
        </v-layout>
        <!--
               headers: 定义数据列表的表头数据。我们管理的
               items： 定义数据列表的内容数据。我们管理的
               pagination： 定义分页参数的对象。该对象是有Vuetify框架管理的
               total-items： 定义总记录数。我们管理的
               loading： 进度条 true： 显示，false：不显示。我们管理的
        -->
        <v-data-table
                :headers="headers"
                :items="desserts"
                :pagination.sync="pagination"
                :total-items="totalDesserts"
                :loading="loading"
                class="elevation-1"
        >
            <!--定义表格的每列的内容来自于items的哪个属性-->
            <template v-slot:items="props">
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.name }}</td>
                <td class="text-xs-center"><img :src="props.item.image"/></td>
                <td class="text-xs-center">{{ props.item.letter }}</td>
            </template>
        </v-data-table>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                totalDesserts: 0,
                desserts: [],
                loading: true,
                pagination: {},
                headers: [
                    { text: '品牌编号', value: 'id' , sortable:true, align:'center' },
                    { text: '品牌名称', value: 'name' , sortable:false, align:'center'},
                    { text: '品牌图片', value: 'image' , sortable:false, align:'center'},
                    { text: '品牌首字母', value: 'letter' , sortable:true, align:'center'},
                ],
                searchKey:'',//搜索关键词
            }
        },
        mounted () {
            //调用查询品牌
            this.loadBrandData();
        },
        //属性监听
        watch:{
           //监听搜索关键词
            "searchKey":{ //基本变量
                handler(){
                    //调用查询品牌
                    this.loadBrandData();
                }
            },
            "pagination":{ //监听对象，必须使用深度监听
                deep:true,
                handler(){
                    //调用查询品牌
                    this.loadBrandData();
                }
            }
        },
        methods: {
            //查询品牌分页列表
            loadBrandData(){
                //往后端微服务发送请求
                this.$http.get('/item/brand/page',{
                    params:{
                        page:this.pagination.page,
                        rows:this.pagination.rowsPerPage,
                        key:this.searchKey,
                        sortBy:this.pagination.sortBy,
                        desc:this.pagination.descending,
                    }
                }).then(resp=>{
                    this.desserts = resp.data.items; //当前页列表
                    this.totalDesserts = resp.data.total; //总记录数

                    //关闭进度条
                    this.loading = false;

                }).catch(e=>{
                    console.log('品牌查询失败');
                });
            }
        }
    }
</script>